import React from 'react';

class VideoPlayer extends React.Component {
  videoRef: LegacyRef<HTMLVideoElement> | undefined;
  constructor(props: {} | Readonly<{}>) {
    super(props);
    this.videoRef = React.createRef();
    this.state = {
      duration: 0,
    };
  }

  componentDidMount() {
    const { src } = this.props;
    this.videoRef.current.src = src;

    this.videoRef.current.addEventListener('loadedmetadata', () => {
      this.setState({
        duration: this.videoRef.current.duration,
      });
    });
  }

  render() {
    return (
      <div>
        <video ref={this.videoRef} controls width="390" height="200">
          <source src={this.props.src} type="video/mp4" />
        </video>
        <p>视频时长：{Math.floor(this.state.duration)}秒</p>
      </div>
    );
  }
}

export default VideoPlayer;
